/* eslint-disable react/jsx-pascal-case */
import React, { Component } from 'react'
import ArticleContent_container from '../../../../../containers/ArticleContent_container'
import BlogSider_container from '../../../../../containers/BlogSider_container'
import '../../componentStyle/blogSider.css'
import { message, Empty, Button } from 'antd';

import store from '../../../../../redux/store'
import { Provider } from 'react-redux'
import { _getBlog, _deleteArticle } from '../common/Api';

const success = (msg) => {
    message.success(msg);
};

// TODO: 接收对应文章分类的所有文章信息

export default class LayoutContent extends Component {
    constructor(props) {
        super(props);

        this.state = {
            article: [],
            page: 1,
            type: 0
        }

        store.subscribe(() => { // 监听redux变化
            let obj = store.getState();

            this.setState({
                page: obj.page,
                type: obj.type
            });

            this.getBlog(obj.type + 1, obj.page);
        })

        this.getBlog(1, 1);
    }

    // 获取列表文章接口
    async getBlog(type, page) {
        const res = await _getBlog({
            type: type,
            page: page
        });

        if (res.data.code === 0) {
            if (res.data.data.article.length === 0) {
                this.setState({
                    article: []
                });
            } else {
                this.setState({
                    article: res.data.data.article,
                    page
                });
            }
        }
    }

    // 删除文章
    deleteAssignArticle = (articleID, title) => {
        // 删除指定文章
        this.deleteArticle(articleID, title);
    }

    // 删除文章文章接口
    async deleteArticle(articleID, deleteTitle) {
        const res = await _deleteArticle({
            articleID
        });

        console.log(res);

        if (res.code === 0) {
            setTimeout(() => {
                success(`《${deleteTitle}》删除成功`)

                // 重新请求列表文章
                let obj = store.getState();
                this.getBlog(obj.type, obj.page)
            }, 500);
        }
    }

    render() {
        let emptyState = [];

        if (this.state.article.length === 0) {
            emptyState.push(
                <Empty
                    key={1}
                    image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
                    imageStyle={{
                        height: 60,
                    }}
                    description={
                        <span>
                            暂无数据
                        </span>
                    }
                >
                    <Button type="primary">新增文章</Button>
                </Empty>
            )
        }

        return (
            <div style={{
                margin: '0 auto',
                width: 1200
            }} className="removeFloat">
                <Provider store={store}>
                    <BlogSider_container />
                </Provider>
                <div style={{
                    float: 'right',
                    width: 900
                }}>
                    {
                        this.state.article.map((item, index) => {
                            return (
                                <Provider store={store} key={index}>
                                    <ArticleContent_container
                                        item={item}
                                        index={index}
                                        history={this.props.history}
                                        deleteAssignArticle={this.deleteAssignArticle}
                                        articleID={item.articleID}
                                    />
                                </Provider>
                            )
                        })
                    }
                    {
                        emptyState
                    }
                </div>
            </div>
        );
    }
}
